<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script type="javascript" src="../js/bootstrap.js"></script>
    <style>
        .cx{
            width: 1000px;
            background: #b6d4fe;
            margin: 0 auto;
        }
        .message{
            height: 1000px;
            position: relative;
        }
        .user-show img{
            float: left;
            width: 40px;
            height: 40px;
            margin: 5px 10px 0 0;
        }
        .user-show ul{
            list-style: none;
        }
        .message .content{

        }
        .message .images-panel{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .message .images-panel>*{
            background: #20c997;
            height: 200px;
        }
        .message .vote{
            display: flow-root;
        }
        .message .vote .contact{
            width: 40px;
            height: 40px;
            float: right;
            margin: 5px;
            background: #b6d4fe;
            border: 1px solid black;
            overflow: hidden;
        }
        .message .vote .comment{
            width: 100px;
        }
        .message .vote:after{
            content: " ";
            clear: right;
        }
        .like-list{
            padding: 2px 0 2px 5px;
        }
        .comment-list{

        }
        .comment-list .comment-detail{
            padding: 2px 0 2px 5px;
        }
    </style>
</head>
<body>
<div class="cx">
    <div class="message">
        <div class="user-show">
            <img src="" alt="">
            <ul>
                <li>碳酸饮料</li>
                <li>10:36</li>
            </ul>
        </div>
        <div class="content">
            The contents of our pages have been created with the utmost care. However, we cannot guarantee the contents' accuracy, completeness or topicality. According to statutory provisions, we are furthermore responsible for our own content on these web pages. In this context, please note that we are accordingly not obliged to monitor merely the transmitted or saved information of third parties, or investigate circumstances pointing to illegal activity. Our obligations to remove or block the use of information under generally applicable laws remain unaffected by this as per §§ 8 to 10 of the Telemedia Act (TMG).
        </div>
        <div class="images-panel">
            <img src="" alt="" class="col-4">
            <img src="" alt="" class="col-4">
            <img src="" alt="" class="col-4">
            <img src="" alt="" class="col-4">
        </div>
        <div class="vote">
            <div class="like contact">like</div>
            <div class="comment contact">comment</div>
<!--            <div class="clear"></div>-->
        </div>
        <div class="like-list">
            The contents of our pages have been created with the utmost care. However, we cannot guarantee the contents' accuracy, completeness or topicality. According to statutory provisions
            觉得很赞
        </div>
        <div class="comment-list">
            <div class="comment-detail">
                <span>
                    <a href="">聊天龙</a>: <comment>今天太阳不错嘛</comment>
                </span>
            </div>
            <div class="comment-detail">
                <span>
                    <a href="">聊天龙</a>: <comment>有想要一起出去玩的吗？</comment>
                </span>
            </div>
        </div>
    </div>
</div>
</body>
</html>